import React from "react";
import { Toast } from "antd-mobile";
import wx from "weixin-js-sdk";

export default class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      flower: 0,
      rmb: 0,
      uinfo: [],
      data: [],
      fl: 0,
      sharebg: false,
      digital: 1,
      day: 0,
      hour: 0,
      minute: 0,
      second: 0,
      id: 0,
    };
  }
  componentDidMount() {
    document.title = "拼团";
    var phone = this.GetQueryValue("phone");

    global.Ajax.hhtc_request("year/infos", {
      share: phone,
    }).then((data) => {
      console.log("data.data.uinfo: ", data.data.uinfo);
      if (data.code === 1) {
        this.setState(data.data);
      }
    });

    //倒计时
    setTimeout(() => {
      var me = this;
      const end = Date.parse(new Date(me.state.uinfo.end_time));
      this.countFun(end);

      console.log("me.state.card_end: ", me.state.end_time);
    }, 1000);

    // 分享
    global.Ajax.hhtc_request("user/get_qrcode",{}).then(data=>{
      console.log('第一步 ', data);
if(data.code===1){
  this.setState(data.data)
      }
  });
  
  global.Ajax.hhtc_request("web/get_share",{windowurl:window.location.href}).then(data=>{
      console.log('分享页面的数据 ', data);
      if (data.code === 1) {
          wx.config({
              debug : false,
              appId : data.data.appId,
              timestamp : data.data.timestamp,
              nonceStr : data.data.noncestr,
              signature : data.data.signature,
              jsApiList : [
                  // 所有要调用的 API 都要加到这个列表中
                  "updateTimelineShareData", //分享给好友
                  "updateAppMessageShareData", //分享到朋友圈
              ]
          })
          
          wx.checkJsApi({
              jsApiList: ['updateTimelineShareData','updateAppMessageShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: function(res) {
                  console.log('checkJsApi--',res)
                  // 以键值对的形式返回，可用的api值true，不可用为false
                  // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              }
          });
          wx.error(function(res){
              console.log(res)
              // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          });
          
          wx.ready(()=>{
              //配置好需要分享的几个配置，这里只是演示，实际开发中应该是动态的变量
              var shareData = {
                  title: '好友邀请你加入艺看学院',
                  desc: '你的好友正在邀请你加入艺看学院，快来看看吧',
                  link: window.location.href.split('#')[0],
                  imgUrl: 'https://yksy.qianjitianxia.com/o_1eiao12gcfa6122j1eicun0pjl8.png',//传递给微信需传递完整的带url链接
                  success:function() {
                      global.Ajax.hhtc_request("user/share",{}).then(data=>{
                          console.log('data: ', data);
                          // return Toast.success(data.msg);
                      })
                  }
              };

              //调用各个接口并传入配置变量
              wx.updateTimelineShareData(shareData);
              wx.updateAppMessageShareData(shareData);
          });
      }
  });



  }
  GetQueryValue(queryName) {
    var query = decodeURI(window.location.hash.substring(1));
    var vars = query.split("?");
    for (var i = 0; i < vars.length; i++) {
      var pair = vars[i].split("=");
      if (pair[0] == queryName) {
        return pair[1];
      }
    }
    return 0;
  }

  countFun = (end) => {
    let now_time = Date.parse(new Date());
    console.log("now_time: ", now_time);
    var remaining = end - now_time;
    console.log("remaining: ", remaining);

    this.timer = setInterval(() => {
      //防止出现负数
      if (remaining > 1000) {
        remaining -= 1000;
        let day = Math.floor(remaining / 1000 / 3600 / 24);
        let hour = Math.floor((remaining / 1000 / 3600) % 24);
        let minute = Math.floor((remaining / 1000 / 60) % 60);
        let second = Math.floor((remaining / 1000) % 60);

        this.setState({
          day: day,
          hour: hour < 10 ? "0" + hour : hour,
          minute: minute < 10 ? "0" + minute : minute,
          second: second < 10 ? "0" + second : second,
        });
      } else {
        clearInterval(this.timer);
        //倒计时结束时触发父组件的方法
        //this.props.timeEnd();
      }
    }, 1000);
  };
  render() {
    return (
      <div style={{ height: "100vh", background: "#F5F5F5" }}>
        <div className='vip_top'>
          <img alt='' src={this.state.uinfo.avatar} alt='' />
          <div>
            <h1>{this.state.uinfo.nickname}，您好！</h1>
            <p>年费会员课程免费学~</p>
            {this.state.uinfo.level != 3 && (
              <span
                onClick={() => {
                  this.props.history.push({
                    pathname: "/page/home/user/payvip",
                    query: {
                      initiate: 0,
                      sid: 0,
                      type: 0,
                    },
                  });
                }}
              >
                开通年费会员
              </span>
            )}
            {this.state.uinfo.level === 3 && (
              <p>{this.state.uinfo.out_time}到期</p>
            )}
          </div>
        </div>
        {/*  */}
        <div className='yaoq_box'>
          {this.state.digital === 1 ? <h1>拼团福利</h1> : <h1>拼团福利22</h1>}
          {this.state.uinfo.level !== 3 && this.state.uinfo.initiate === 1 && (
            <div className='item'>
              <img alt='' src={require("../../imgs/13333.png")} />
              <div>
                <h2>邀请好友拼团</h2>
                <p>获得购买会员优惠</p>
              </div>
            </div>
          )}
          {this.state.uinfo.level !== 3 && this.state.uinfo.spell !== 1 && (
            <div className='item'>
              <img alt='' src={require("../../imgs/12321.png")} />
              <div>
                <h2>参与好友拼团</h2>
                <p className='red'>还差{this.state.uinfo.poor}人成团</p>
              </div>
              <p className='yi1'>
                倒计时:{this.state.day}天{this.state.hour}时{this.state.minute}
                分{this.state.second}秒
              </p>
            </div>
          )}

          {this.state.uinfo.level === 3 && (
            <div className='item'>
              <img alt='' src={require("../../imgs/132.png")} />
              <div>
                <h2>您已经是会员</h2>
                <p>不可参与拼团</p>
              </div>
            </div>
          )}
          {this.state.uinfo.level !== 3 &&
            (this.state.uinfo.is_uid === 1 ? (
              this.state.uinfo.initiate === 1 ? (
                <p
                  className='yaoqin'
                  onClick={() => {
                    this.setState({
                      sharebg: true,
                    });
                  }}
                >
                  拼团分享
                </p>
              ) : (
                <p className='yaoqin'>已成功支付</p>
              )
            ) : (
              <p
                className='yaoqin'
                onClick={() => {
                  this.props.history.push({
                    pathname: "/page/home/user/payvip",
                    query: {
                      initiate: this.state.uinfo.initiate,
                      sid: this.state.uinfo.sid,
                      type: 1,
                    },
                  });
                }}
              >
                邀请拼团
              </p>
            ))}

          {this.state.uinfo.level !== 3 && this.state.uinfo.spell !== 1 && (
            <div className='abs'>
              <b className='jiachu'>已参与拼团好友</b>
              {this.state.uinfo.poor && (
                <span className='red'>还差{this.state.uinfo.poor}人成团</span>
              )}
              {this.state.uinfo.sp1_nickname !== 0 && (
                <div className='leibiao'>
                  <img alt='' src={this.state.uinfo.sp1_avatar} />
                  <h2>{this.state.uinfo.sp1_nickname}</h2>
                </div>
              )}
              {this.state.uinfo.sp2_nickname !== 0 && (
                <div className='leibiao'>
                  <img alt='' src={this.state.uinfo.sp2_avatar} />
                  <h2>{this.state.uinfo.sp2_nickname}</h2>
                </div>
              )}
            </div>
          )}
        </div>

        {/*  */}
        {this.state.data.map((item, index) => {
          return (
            item.data.length > 0 && (
              <React.Fragment key={"data" + index}>
                <div className='title_box'>
                  <h1>{item.title}</h1>
                  <p
                    onClick={() => {
                      this.props.history.push(
                        "/page/home/home/classify/" + item.id
                      );
                    }}
                  >
                    <span>更多</span>
                    <img alt='' src={require("../../imgs/r2.png")} />
                  </p>
                </div>
                <div className='sy_list'>
                  {item.data.map((child, k) => {
                    return (
                      <div
                        className='item'
                        key={"child" + k}
                        onClick={() => {
                          this.props.history.push(
                            "/page/home/learn/learndetail/" + child.id
                          );
                        }}
                      >
                        <div className='picbox'>
                          <img alt='' src={child.img} className='pic' />
                          <p className='bq'>
                            {child.type === 1 ? "视频" : "听书"}
                          </p>
                        </div>
                        <p className='title'>{child.title}</p>
                      </div>
                    );
                  })}
                </div>
              </React.Fragment>
            )
          );
        })}
        {this.state.sharebg && (
          <div className=''>
            <img
              alt='分享提示图'
              src={require("../../imgs/sharebg.png")}
              className='sharebg'
            />
            <p
              className='shareclosebtn'
              onClick={() => {
                this.setState({
                  sharebg: false,
                });
              }}
            ></p>
          </div>
        )}
      </div>
    );
  }
}
